// 设置变量
@bg-color: #b7d4a8;

// 清除默认样式
* {
	margin: 0;
	padding: 0;
	// 改变盒子模型的计算方式
	box-sizing: border-box;
}

body {
	font: bold 20px 'Courier';
}

//设置主窗口的样式
#main {
	width: 360px;
	height: 420px;
	background-color: @bg-color;
	margin: 100px auto;
	border: 10px solid #000;
	border-radius: 40px;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

// 游戏舞台
#stage {
	width: 304px;
	height: 304px;
	border: 2px solid black;
	position: relative;
}

// 设置蛇的样式
#snake {
	& > div {
		width: 10px;
		height: 10px;
		background-color: black;
		border: 1px solid @bg-color;
		position: absolute;
	}
}

// 设置食物
#food {
	width: 10px;
	height: 10px;
	position: absolute;
	left: 40px;
	top: 100px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;

	& > div {
		width: 4px;
		height: 4px;
		background-color: #000;
		transform: rotate(45deg);
	}
}

// 记分牌
#score-panel {
	display: flex;
	width: 300px;
	justify-content: space-between;
}
